<!DOCTYPE html>
<html>


<!-- Mirrored from www.gzsxt.cn/theme/hplus/table_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>办公系统 - 基础表格</title>
    <meta name="keywords" content="办公系统">
    <meta name="description" content="办公系统">

    <link rel="shortcut icon" href="favicon.ico"> 
	<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/select/bootstrap-select.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/plugins/zTreeStyle/zTreeStyle.css" />

</head>

<body class="gray-bg">
	<div class="wrapper2 wrapper-content2 animated fadeInRight">
	       <div class="row">
	    		<div class="col-sm-5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>添加角色</h5>
                    </div>
                    <div class="ibox-content">
                        <form id="saveForm" class="form-horizontal">
							<!-- <input type="hidden" name="ids" id="ids" value="" /> -->
							<input type="hidden" name="status" value="1" />
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色名称：</label>

                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="rolename">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色描述：</label>

                                <div class="col-sm-8">
                                    <input type="text" name="roledis" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色权限：</label>

                                <div class="col-sm-8">
                                     <ul id="treeDemo" class="ztree"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">是否启用：</label>
                                <div class="col-sm-8">
                                    <div class="switch">
			                            <div class="onoffswitch">
			                                <input type="checkbox" checked class="onoffswitch-checkbox" id="status">
			                                <label class="onoffswitch-label" for="status">
			                                    <span class="onoffswitch-inner"></span>
			                                    <span class="onoffswitch-switch"></span>
			                                </label>
			                            </div>
			                        </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-8">
                                    <button class="btn btn-sm btn-white" type="button" id="btn"><i class="fa fa-save"></i> 保存</button>
                                    <button class="btn btn-sm btn-white" type="reset"><i class="fa fa-undo"></i> 重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
	    		<div class="col-sm-7">
                  <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>角色列表 <small>点击修改信息将显示在左边表单</small></h5>
                    </div>
                    <div class="ibox-content">                   		
                        <div class="hr-line-dashed2"></div>
                        <div class="row">
                            <div class="table-responsive">
                            <table class="table table-striped list-table">
                                <thead>
                                    <tr>		
                                        <th>选择</th>
                                        <th>角色名称</th>
                                        <th>角色描述：</th>
                                        <th>是否启用</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- <tr>
                                        <td><input  type="checkbox" checked=""></td>
                                    	<td>财务</td>
                                    	<td>财务</td>
                                    	<td>
                                    		是
                                    	</td>
                                        <td>
                                        <a href="update-role.html"><i class="glyphicon glyphicon-edit  text-navy"></i></a>
                                        <a href="javascript:void(0)" class="btndel"><i class="glyphicon glyphicon-remove text-navy"></i></a>
                                        </td>
                                    </tr> -->
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
	                        	<div class="col-sm-5">
	                        		<button class="btn btn-sm btn-primary" id="chooseAll" type="button"><i class="fa fa-check-square-o"></i> 全选</button>
	                        		<button class="btn btn-sm btn-primary" id="reverse" type="button"><i class="fa fa-square-o"></i> 反选</button>
	                        		<button class="btn btn-sm btn-primary" id="delBtn" type="button"><i class="fa fa-times-circle-o"></i> 删除</button>
	                        	</div>
							<div class="col-sm-7 text-right">
								<div class="btn-group" id="dd">
	                              
								    <!-- <span>共有50页,当前是第3页</span>
	                                <a href=''>首页</a>
	                                <a href=''>上一页</a>
	                                <a href=''>下一页</a>
	                                <a href=''>尾页</a> -->
	                            </div>
							</div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            
	    	</div>
	
	</div>       
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
	<script src="js/plugins/select/bootstrap-select.min.js"></script>
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
	<script src="js/plugins/ztree/jquery.ztree.core.min.js"></script>
	<!-- <script src="js/plugins/ztree/jquery.ztree.exedit.js"></script> -->
	<script src="js/plugins/ztree/jquery.ztree.excheck.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.serializejson.min.js" type="text/javascript" charset="utf-8"></script>
   <script>
	$(document).ready(function() {
		// 设置按钮的样式
		$('.selectpicker').selectpicker('setStyle', 'btn-white').selectpicker('setStyle', 'btn-sm');
		
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "pid",
					rootPId: 0
				}
			}
		};
		
		//点击删除
		// $('.btndel').click(function () {
		//     swal({
		//         title: "您确定要改修该角色状态吗？",
		//         text: "改修后将将，请谨慎操作！",
		//         type: "warning",
		//         showCancelButton: true,
		//         confirmButtonColor: "#DD6B55",
		//         confirmButtonText: "删除",
		//         closeOnConfirm: false
		//     }, function () {//此函数是点击删除执行的函数
		//     		//这里写ajax代码
		//     		// 以下是成功的提示框，请在ajax回调函数中执行
		// 	    swal("删除成功！", "您已经永久删除了这条信息。", "success");
		//     });
		// });
		
		var pageNum = 1
		var pageSize = 3
		
		showRoles(pageNum,pageSize)
		
		$.ajax({
			url:"source/all",
			type:"get",
			dataType:"json",
			success:function(ret){
				if(ret.status){
					$.fn.zTree.init($("#treeDemo"), setting, ret.data.items);
				}
			}
		})
		
		$("#btn").click(function(){
			
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getCheckedNodes(true);
			// console.log(nodes)
			
			var arr = new Array()
			for(var i = 0;i<nodes.length;i++){
				arr[i]=nodes[i].id
			}
			
			var ids = arr.join("-")
			// $("input[name='ids']").val(ids)
			
			var data = $("#saveForm").serializeJSON()
			
			$.ajax({
				url:"role/save/"+ids,
				type:"post",
				data:JSON.stringify(data),
				dataType:"json",
				contentType:"application/json",
				success:function(ret){
					if(ret.status){
						window.location.reload()
					}
				}
			})
			
		})
		
		$("#chooseAll").click(function(){
			$("input[name='id']").attr("checked","checked")
		})
		
		$("#reverse").click(function(){
			$("input[name='id']").each(function(i,n){
				this.checked = !this.checked 
			})
		})
		
		$("#delBtn").click(function(){
			var arr = $("input[name='id']:checked")
			var arrIds = new Array()
			
			for(var i=0;i<arr.length;i++){
				arrIds[i]=arr[i].value
			}
			
			var ids = arrIds.join("-")
			
			del(ids)
		})
		
	});
	
	function showRoles(pageNum,pageSize){
		$.ajax({
			url:"role/"+pageNum+"/"+pageSize,
			type:"get",
			dataType:"json",
			success:function(ret){
				if(ret.status){
					$("tbody").empty()
					$("#dd").empty()
					$.each(ret.data.items.list,function(i,role){
						$("tbody").append('<tr><td><input name="id" type="checkbox" value="'+role.roleid+'"></td>'
								+'<td>'+role.rolename+'</td>'
								+'<td>'+role.roledis+'</td>'
								+'<td>'+showStatus(role.status)+'</td><td>'
								+'<a href="update-role.html?id='+role.roleid+'"><i class="glyphicon glyphicon-edit  text-navy"></i></a>'
								+'<a href="javascript:void(0)" class="btndel" onclick="del('+role.roleid+')"><i class="glyphicon glyphicon-remove text-navy"></i></a>'
								+'</td>'
								+'</tr>')
					})
					
					$("#dd").append('<span>共有'+ret.data.items.pages+'页,当前是第'+ret.data.items.pageNum+'页</span>'
		                            +'<a href="javascript:void(0)" onclick="showRoles(1,'+pageSize+')">首页</a>'
		                            +'<a href="javascript:void(0)" onclick="showRoles('+ret.data.items.prePage+','+pageSize+')">上一页</a>'
		                            +'<a href="javascript:void(0)" onclick="showRoles('+ret.data.items.nextPage+','+pageSize+')">下一页</a>'
		                            +'<a href="javascript:void(0)" onclick="showRoles('+ret.data.items.pages+','+pageSize+')">尾页</a>')
				}
			}
		})
	}
	
	function del(obj){
		swal({
		    title: "您确定要改修该角色状态吗？",
		    text: "改修后将将，请谨慎操作！",
		    type: "warning",
		    showCancelButton: true,
		    confirmButtonColor: "#DD6B55",
		    confirmButtonText: "删除",
		    closeOnConfirm: false
		}, function () {//此函数是点击删除执行的函数
			//这里写ajax代码
			$.ajax({
				url:"role/"+obj,
				type:"post",
				dataType:"json",
				success:function(ret){
					if(ret.status){
						// 以下是成功的提示框，请在ajax回调函数中执行
						swal({title:"删除成功！", text:"您已经永久删除了这条信息。", type:"success"},function(){
							window.location.reload()
						})
						
					}
				}
			})
			
		});
		
		
	}
	
	function showStatus(obj){
		if(obj == 1){
			return "是"
		}else if(obj == 0){
			return "否"
		}
	}
	
	
    </script>
    
</body>


</html>
    
